<!DOCTYPE html>
<html>

<style>
	.explain_box {
		padding: 8px 0 0 5px;
		border-top: 1px dashed #dbdbdb;
	}
</style>

<body class="bgf6">

<div th:include="common/bookTop :: commonTop"></div>
	
	<div class="main-body pb100" id="app">
		<div class="container pt10">

				<!--			面包屑-->
			<div class="bread-nav bgff">

			</div>
			<br>



			<el-table
					:stripe="isStripe"
					ref="multipleTable"
					:data="cards"
					tooltip-effect="dark"
					style="width: 100%"
					@selection-change="handleSelectionChange">
				<el-table-column
						type="selection"
						width="55">
				</el-table-column>
				<el-table-column
						label="商品"
						width="240">

					<template slot-scope="scope">
						<el-row>
							<el-col :span="12">
								<div class="grid-content">
									<img :src="scope.row.pictureUrl" style="width: 60px; height: 60px">
								</div>
							</el-col>
							<el-col :span="12">
								<div class="grid-content">
									{{scope.row.commodityName}}
								</div>
							</el-col>
						</el-row>
					</template>

				</el-table-column>
				<el-table-column
						prop="price"
						label="单价"
						width="120">
				</el-table-column>
				<el-table-column
						label="数量"
						show-overflow-tooltip>
					<template slot-scope="scope">
						<el-row>
							<el-col :span="2">
								<div class="grid-content">
									<el-tag type="success" size="mini" @click="scope.row.buyNum = scope.row.buyNum ==1 ? 1 : scope.row.buyNum-1">-</el-tag>
								</div>
							</el-col>
							<el-col :span="20">
								<div class="grid-content">
									<el-input v-model="scope.row.buyNum" size="mini"></el-input>
								</div>
							</el-col>
							<el-col :span="2">
								<div class="grid-content">
									<el-tag type="success" size="mini" @click="++scope.row.buyNum">+</el-tag>
								</div>
							</el-col>
						</el-row>

					</template>
				</el-table-column>
				<el-table-column
						label="小计"
						show-overflow-tooltip>
					<template slot-scope="scope">
						{{mul(scope.row.buyNum, scope.row.price)}}
					</template>

				</el-table-column>
				<el-table-column
						prop="address"
						label="操作"
						show-overflow-tooltip>

					<template slot-scope="scope">
						<el-link type="danger" @click="remoteCard(scope.row.cardId)">删除</el-link>
					</template>
				</el-table-column>
			</el-table>


			<el-divider content-position="left"></el-divider>

			<div style="float: right;margin-right: 20px">
				总价：{{totalAmountHandler}}￥
				<el-button type="danger" @click="settlement4">去结算</el-button>
			</div>


		</div>
	</div>

<script type="text/javascript">

	var app = new Vue({
		el : '#app',
		data : {
			//全部的商品
			cards: [],
			//已选中的商品
			selCards : [],
			isStripe : true
		},
		created : function() {
			//加载图书详情
			this.loadCards();
		},
		computed: {
			totalAmountHandler: function () {
				let totalAmount = 0;
				for (let i=0; i<this.selCards.length; i++) {
					let card = this.selCards[i];
					totalAmount = this.plus(totalAmount, this.mul(card.buyNum, card.price));
				}
				return totalAmount;
			}
		},
		methods : {
			settlement1 : function() {
				let orderParam = '';
				//循环被选中的商品  私人协议  cardId$commoId$buyNum-cardId$commoId$buyNum
				for (let i=0; i<this.selCards.length; i++) {
					let card = this.selCards[i];
					orderParam += card.cardId + '$' + card.commodityId + '$' + card.buyNum + '-';
				}

				alert(orderParam);
				atm.ajax({
					url : '/order/settlement1',
					requestMethod : 'POST',
					data : {
						commondityInfo : orderParam
					},
					success : function (responseData) {
						alert('结算成功，去支付');
					}
				});
			},
			settlement2 : function() {
				//请求的参数数组
				let orderParams = [];
				//循环被选中的商品  私人协议  cardId$commoId$buyNum-cardId$commoId$buyNum
				for (let i=0; i<this.selCards.length; i++) {
					let card = this.selCards[i];

					//创建一个商品详情对象
					let commodityInfo = {
						cardId : card.cardId,
						commodityId : card.commodityId,
						buyNum : card.buyNum
					}

					orderParams.push(commodityInfo)
				}

				//把js对象转成json字符串
				let jsonText = JSON.stringify(orderParams);
				alert(jsonText);
				atm.ajax({
					url : '/order/settlement2',
					requestMethod : 'POST',
					data : {
						settlementRequestVO : jsonText
					},
					success : function (responseData) {
						alert('结算成功，去支付');
					}
				});
			},
			settlement3 : function() {
				//请求的参数数组
				let orderParams = [];
				//循环被选中的商品  私人协议  cardId$commoId$buyNum-cardId$commoId$buyNum
				for (let i=0; i<this.selCards.length; i++) {
					let card = this.selCards[i];

					//创建一个商品详情对象
					let commodityInfo = {
						cardId : card.cardId,
						commodityId : card.commodityId,
						buyNum : card.buyNum
					}

					orderParams.push(commodityInfo)
				}

				//把js对象转成json字符串
				let jsonText = JSON.stringify(orderParams);
				alert(jsonText);
				$.ajax({
					url : '/order/settlement3',
					type : 'POST',
					dataType : 'json',
					//请求参数 就是刚刚序列化的json字符串
					data : jsonText,
					//告诉后台，这次发送的请求参数格式
					contentType : 'application/json',
					success : function (responseData) {
						if (responseData.code != 1000) {
							alert(responseData.message);
							return;
						}
						alert('结算成功，去支付');
					}
				});
			},
			settlement4 : function() {
				//请求的参数数组
				let orderParams = [];
				//循环被选中的商品  私人协议  cardId$commoId$buyNum-cardId$commoId$buyNum
				for (let i=0; i<this.selCards.length; i++) {
					let card = this.selCards[i];

					//创建一个商品详情对象
					let commodityInfo = {
						cardId : card.cardId,
						commodityId : card.commodityId,
						buyNum : card.buyNum
					}

					orderParams.push(commodityInfo)
				}

				//把js对象转成json字符串
				let jsonText = JSON.stringify(orderParams);
				alert(jsonText);
				axios.post('/order/settlement3', jsonText,{
					headers: {
						'Content-Type': 'application/json;charset=UTF-8'
					}
				})
				.then(function (response) {
					console.log(response);
					alert('结算成功，去支付');
					window.location.href = '/card/toSettlement.html';
				});


			},
			remoteCard : function(cardId) {
				let that = this;
				atm.ajax({
					url : '/card/deleteCard',
					requestMethod : 'POST',
					data : {
						cardId : cardId
					},
					success : function (responseData) {
						alert('删除成功');
						that.loadCards();
					}
				});
			},
			handleSelectionChange : function(selection) {
				console.log(selection)
				this.selCards = selection;
			},
			loadCards : function () {
				let that = this;
				atm.ajax({
					url : '/card/listCards',
					requestMethod : 'POST',
					data : {
					},
					success : function (responseData) {
						that.cards = responseData.data;
					}
				});
			},
			mul : function (num1, num2) {
				const num1String = num1.toString()
				const num2String = num2.toString()
				const num1Digits = (num1String.split('.')[1] || '').length
				const num2Digits = (num2String.split('.')[1] || '').length
				const baseNum =  Math.pow(10, num1Digits + num2Digits)
				return Number(num1String.replace('.', '')) * Number(num2String.replace('.', '')) / baseNum
			},
			plus : function(num1, num2) {
				const num1Digits = (num1.toString().split('.')[1] || '').length
				const num2Digits = (num2.toString().split('.')[1] || '').length
				const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits))
				return (this.mul(num1, baseNum) + this.mul(num2, baseNum)) / baseNum
			}
		}
	});

</script>
</body>
</html>
